import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, message, Input, Tree, Select } from 'antd';
import { changeGoods } from '../apis/goods/goods';
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function ChnageGoods(props) {
  const { Option } = Select;
  const [pid, setPid] = useState();

  const handleOk = () => {};

  const handleCancel = () => {
    props.changecancel();
  };
  const onCheck = (values) => {
    setPid(values);
  };
  const onFinish = async (values) => {
    const res = await changeGoods({ ...values, pid, id: props.changeData.id });
    console.log(res);
    if (res.status == 200) {
      message.success('修改成功');
    } else {
      message.success('修改失败');
    }
  };
  return (
    <div>
      <Modal
        title="修改商品类型"
        visible={props.isModal}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form {...layout} name="control-hooks" onFinish={onFinish}>
          <Form.Item
            name="name"
            label="商品类型名称："
            rules={[
              {
                required: true,
                message: '请输入正确的商品类型名称',
              },
            ]}
          >
            <Input.TextArea
              placeholder="请输入商品类型名称"
              defaultValue={
                props.changeData != null ? props.changeData.text : ''
              }
            />
          </Form.Item>
          <Form.Item
            name="status"
            label="商品类型状态："
            rules={[
              {
                required: true,
                message: '请输入正确的商品类型状态',
              },
            ]}
          >
            <Select defaultValue="启用">
              <Option value="1">启用</Option>
              <Option value="2">停用</Option>
            </Select>
          </Form.Item>
          <p>上级商品类型：</p>
          <Tree
            style={{ marginLeft: '100px' }}
            checkable
            onCheck={onCheck}
            treeData={props.state}
          />
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
